<script setup>

import { ref } from "vue";
import { RouterLink, RouterView, useRoute } from "vue-router";
// axios get tabbarList
//数据
const tabbarList = [
  { id: 1, icon: "&#xe651;", text: "首页", to: { path: "/home" } },
  { id: 2, icon: "&#xe690;", text: "购物车", to: { path: "/cart" } },
  { id: 3, icon: "&#xe655;", text: "订单", to: { path: "/order" } }, //"tabbar_item tabbar_item--active"
  { id: 4, icon: "&#xe60b;", text: "我的", to: { path: "/my" } }
];
let showId = ref(1)
const change = (i) => {
  showId.value = i
}
const route = useRoute();
switch (route.name) {
  case `home`:
    showId.value = 1;
    break;
  case `cart`:
    showId.value = 2;
    break;
  case `order`:
    showId.value = 3;
    break;
  case `my`:
    showId.value = 4;
    break;
}

</script>
<template>
  <!-- 底部tabbar -->
  <div class="tabbar">
    <div :class="{ 'tabbar_item': true, 'tabbar_item--active': item.id === showId }" v-for="item in tabbarList"
      :key="item.id">
      <RouterLink :to=item.to @click="change(item.id)">
        <span class="iconfont" v-html="item.icon"></span>
        <span class="tabbar_title">{{ item.text }}</span>
      </RouterLink>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/viriables.scss";

.tabbar {
  width: 100%;
  height: 0.49rem;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 0.01rem solid $content_bgColor;
  display: flex;

  &_item {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: $content_fontcolor;
    }

    //活动样式
    &--active {
      a {
        color: #1fa4fc;
      }
    }
  }
}
</style>